<template>
  <div class="recruit-edit">
    <!-- 招聘编辑 -->
    <div class="detail-nav font13 h99">
      <router-link to="/vip/c_policy_declaration">{{$t('common.newJob.enterpriseCenter')}}</router-link>
      <span>&gt;</span>
      <router-link to="/vip/c_recruit_edit">{{$t('common.newJob.recruitmentEditor')}}</router-link>
    </div>
    <div class="recruit-edit-content">
      <div class="recruit-edit-box">
        <div class="zmlTitle">{{$t('common.newJob.jobInfo')}}</div>
        <div class="recruit-edit-info">
          <table>
            <tr>
              <td>{{$t('common.newJob.jobTitle')}}</td>
              <td>
                <el-input class="zhiwei" v-model="input_zw" :placeholder="$t('common.newJob.inputJobTitle')" maxlength="20"></el-input>
              </td>
              <td>{{$t('common.newJob.peopleCount')}}</td>
              <td>
                <el-input class="num" :placeholder="$t('common.newJob.inputPeopleCount')" v-model="input_rs" maxlength="10">
                  <template slot="append">
                    {{$t('common.newJob.peoples')}}
                  </template>
                </el-input>
              </td>
            </tr>
            <tr>
              <td>{{$t('common.newJob.vacantType')}}</td>
              <td>
                <el-select v-model="input_lb" :placeholder="$t('common.newJob.select')">
                  <el-option
                    v-for="item in options_lb"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </td>
              <td>{{$t('common.newJob.workType')}}</td>
              <td>
                <el-select v-model="input_lx" :placeholder="$t('common.newJob.select')">
                  <el-option
                    v-for="item in options_lx"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td>{{$t('common.newJob.salary')}}</td>
			  <td>
                <el-select v-model="input_price" :placeholder="$t('common.newJob.select')">
                  <el-option
                    v-for="item in options_price"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </td>
              <!-- <td class="flexItems">
                <el-input placeholder="请输入内容" v-model="input_price1" class="price">
                  <template slot="append">k</template>
                </el-input>
                <span class="zml">至</span>
                <el-input placeholder="请输入内容" v-model="input_price2" class="price">
                  <template slot="append">k</template>
                </el-input>
              </td> -->
              <td>{{$t('common.newJob.education')}}</td>
              <td>
                <el-select v-model="input_xl" :placeholder="$t('common.newJob.select')">
                  <el-option
                    v-for="item in options_xl"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td>{{$t('common.newJob.address')}}</td>
              <td>
                <el-cascader
                  v-model="input_address"
                  :options="options_address"
                  @change="handleChange"
                  separator="-" 
                  :props="{ value: 'label' }"
                  :placeholder="$t('common.newJob.select')"
                ></el-cascader>
              </td>
              <td>{{$t('common.newJob.experience')}}</td>
              <td>
                <el-select v-model="input_jy" :placeholder="$t('common.newJob.select')">
                  <el-option
                    v-for="item in options_jy"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="recruit-edit-box">
        <div class="zmlTitle">{{$t('common.newJob.requirements')}}</div>
        <div class="recruit-edit-require">
          <div class="recruit-edit-require-textarea flex">
            <label>{{$t('common.newJob.duty')}}</label>
            <textarea v-model="positionStatement" :placeholder="$t('common.newJob.inputDuty')" maxlength="500"></textarea>
          </div>
          <div class="recruit-edit-require-textarea flex">
            <label>{{$t('common.newJob.require')}}</label>
            <textarea v-model="jobRequirements" :placeholder="$t('common.newJob.inputRequire')" maxlength="500"></textarea>
          </div>
        </div>
        <div class="recruit-edit-btn flexCenter">
          <!-- <button class="zmlBtn1" @click="publishTap()">{{$t('common.newJob.publish')}}</button> -->
          <button class="zmlBtn1" @click="saveTap()">{{$t('common.newJob.save')}}</button>
          <button class="zmlBtn2" @click="backTap()">{{$t('common.newJob.back')}}</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ajax, showToast, ajaxAdd,ajaxBackAdd, notBlankStr } from '@/utils/js.js';
import { styleList, enterpriseNewJob, enterpriseJobDetail, provinceCity } from '@/services/api.js';
const log = console.log;

export default {
  data() {
    return {
		id: "",
    status: '',

      input_zw: "", //职位名称
      input_rs: "", //招聘人数
      input_lb: "", //招聘类别
      input_lx: "", //工作类型
      input_price: "", //薪资
      input_xl: "", //学历要求
      input_address: [], //选择的地址数组
      input_jy: "", //经验要求
      
      positionStatement: "",
      jobRequirements: "",

        options_lb: [],
        options_lx: [],
        options_xl: [],
        options_jy: [],
      options_address: [], //地址
      options_price: [],
      
      resData: "",
    };
  },
  mounted() {
	console.log(this.$route.query.id)
  this.id = this.$route.query.id 
  this.status = this.$route.query.status

    this.content();
  },
  watch: {
    "$i18n.locale"() {
      this.content();
    },
  },
  methods: {
    handleChange(value) {
      console.log('11111',value);
      this.input_address = value
    },
  
    content() {
      ajaxBackAdd(this, enterpriseJobDetail, {id: this.id}, res => {
        log('res.data',res.data)
        this.resData = res.data
        this.input_zw = res.data.positionName
        this.input_rs = res.data.recruitingNumbers

        this.input_lb = res.data.vacantType
        this.input_lx = res.data.workType
        this.input_price = res.data.salaryRange

        this.input_xl = res.data.education
        this.input_address = res.data.workplace.split(',')
        this.input_jy = res.data.workExperience

        this.positionStatement = res.data.positionStatement
        this.jobRequirements = res.data.jobRequirements
      });
      // 招聘类别
      ajax(this, styleList, { lxjp: "vacantType" }, (res) => {
        this.options_lb = res.data;
      });

      // 工作类型
      ajax(this, styleList, { lxjp: "workType" }, (res) => {
        this.options_lx = res.data;
	  });
	  
	  // 薪资范围
			ajax(this, styleList, { lxjp: 'salaryRange' }, res => {
				this.options_price = res.data;
			});

      // 学历要求
      ajax(this, styleList, { lxjp: "education" }, (res) => {
        this.options_xl = res.data;
      });

      // 经验要求
      ajax(this, styleList, { lxjp: "WORK_EXPERIENCE" }, (res) => {
        this.options_jy = res.data;
	  });
	  
	  // 省市
			ajax(this, provinceCity, {}, res => {
				this.options_address = res.data;
			});
    },

    canSubmit() {
      if (notBlankStr(this.input_zw) == false) {
        showToast(this, this.$t('common.newJob.inputJobTitle'));
        return false;
      }
      if (this.input_rs <= 0) {
        showToast(this, this.$t('common.newJob.inputPeopleCount'));
        return false;
      }
      if (this.input_lb == "") {
        showToast(this, this.$t('common.newJob.selectVacantType'));
        return false;
      }
      if (this.input_lx == "") {
        showToast(this, this.$t('common.newJob.selectWorkType'));
        return false;
      }
      if (this.input_price == "") {
        showToast(this, this.$t('common.newJob.selectSalary'));
        return false;
      }
      if (this.input_xl == "") {
        showToast(this, this.$t('common.newJob.selectEducation'));
        return false;
      }
      if (this.input_address.length == 0) {
      	showToast(this, this.$t('common.newJob.selectAddress'));
      	return false
      }
      if (this.input_jy == "") {
        showToast(this, this.$t('common.newJob.selectExperience'));
        return false;
      }
      if (notBlankStr(this.positionStatement) == false) {
        showToast(this, this.$t('common.newJob.inputDuty'));
        return false;
      }
      if (notBlankStr(this.jobRequirements) == false) {
        showToast(this, this.$t('common.newJob.inputRequire'));
        return false;
      }
      return true;
    },

    postData() {
      let data = {
        corporateType: "",
        education: this.input_xl,
        educationTxt: "",
        enterpriseName: "",
        erId: "",
        id: this.id,
        industry: "",
        jobRequirements: this.jobRequirements,
        positionName: this.input_zw,
        positionStatement: this.positionStatement,
        recruitingNumbers: this.input_rs,
        releaseTime: "",
        salaryRange: this.input_price,
        salaryRangeTxt: "",
        statusTxt: '',
        vacantType: this.input_lb,
        workExperience: this.input_jy,
        workExperienceTxt: '',
        workType: this.input_lx,
        workTypeTxt: '',
        workplace: this.input_address.join(','),
	  };
	  log(data)
	  return data
    },

    publishTap() {
      if (this.canSubmit()) {
        this.publishReq();
      }
    },
    //0 保存 1 发布 2下架
    publishReq() {
      let data = this.postData();
      data.status = '1'
      ajaxAdd(this, enterpriseNewJob, data, (res) => {
        console.log('发布')
        setTimeout(()=>{
          this.$router.push('/vip/c_recruit_release')
        },1500)
        showToast(this,res.msg,1)
      });
    },

    saveTap() {
      if (this.canSubmit()) {
        this.saveReq();
      }
    },

    saveReq() {
      console.log('1111111')
      let data = this.postData();
      data.status = '0'
      ajaxAdd(this, enterpriseNewJob, data, (res) => {
        setTimeout(()=>{
          this.$router.push('/vip/c_recruit_release')
        },1500)
        showToast(this,res.msg,1)
      });
    },

    backTap() {
      // this.$router.back(-1)
      this.$router.push('/vip/c_recruit_release')
    }
  },
};
</script>
<style lang="scss">
.recruit-edit-content {
  background-color: #fff;
  width: 100%;
  padding: 0 140px 60px;
  .recruit-edit-box {
    padding-bottom: 30px;
    border-bottom: 1px solid #d6d7dc;
    .recruit-edit-info {
      padding: 0 14px;
      table {
        width: 100%;
      }
      td {
        padding: 6px 0;
        .zml {
          margin: 0 18px;
        }
      }
      .el-input-group.price {
        width: 150px;
      }
      .el-select > .el-input,
      .el-cascader .el-input,
      .zhiwei,
      .el-input-group.num {
        width: 350px;
      }
    }
    .recruit-edit-require {
      padding: 0 14px;
      .recruit-edit-require-textarea {
        margin-bottom: 12px;
        label {
          color: #666;
        }
        textarea {
          resize: none;
          flex: 1;
          height: 150px;
          border: 1px solid #cccccc;
          padding: 10px 12px;
          font-family: "microsoft yahei";
        }
      }
    }
  }
  .recruit-edit-box:nth-last-of-type(1) {
    border-bottom: 0;
  }
  .el-input-group__append {
    background-color: #fff;
    padding: 0 10px;
  }
  .el-input-group--append .el-input__inner,
  .el-input-group__prepend {
    border-right: 0px;
  }

  .recruit-edit-btn {
    padding-top: 40px;
    button {
      margin: 0 6px;
    }
  }
}
</style>
